@extends('admin.layout.app')
@section('title', '用户管理')

@section('nav')
    @include('admin.layout.nav', ['title'=> ['系统管理','用户管理']])
@endsection

@section('content')
    <div class="box box-primary" style="min-height: 300px;">
        <div class="box-header with-border">
            <h3 class="box-title">用户管理</h3>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
            <form class="form-inline" method="get" action="" style="margin-bottom: 15px;">
                <div class="form-group">
                    <label for="title">用户名：</label>
                    <input type="text" class="form-control" name="username" placeholder="请输入">
                </div>
                <button type="submit" class="btn btn-default">查询</button>
                <a class="btn btn-primary" href="/users/add">添加</a>
            </form>
            <div class="table-responsive">
                <table class="table table-bordered table-hover">
                    <thead>
                    <tr class="active">
                        <th style="width: 40px">id</th>
                        <th style="min-width: 80px">用户名</th>
                        <th style="width: 80px">邮箱</th>
                        <th style="width: 80px">状态</th>
                        <th style="min-width: 150px" >角色</th>
                        <th style="width: 150px">上次登录时间</th>
                        <th style="width: 150px">创建时间</th>
                        <th style="width: 150px">更新时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse ($users as $user)
                        <tr>
                            <td>{{$user->id}}</td>
                            <td>{{$user->name}}</td>
                            <td>{{$user->email}}</td>
                            <td>
                                @if($user->status == 1)
                                    <span class="label label-success">启用</span>
                                @else
                                    <span class="label label-danger">禁用</span>
                                @endif
                            </td>
                            <td>
                                @forelse($user->roles as $role)
                                    <span class="label label-info">{{$role->display_name}}</span>
                                @empty

                                @endforelse
                            </td>
                            <td>{{$user->last_login}}</td>
                            <td>{{$user->created_at}}</td>
                            <td>{{$user->updated_at}}</td>
                            <td>
                                @if($user->status == 1)
                                    <button class="btn btn-sm btn-danger updateStatus" data-status="0"  data-id="{{$user->id}}">禁用</button>
                                @else
                                    <button class="btn btn-sm btn-success updateStatus" data-status="1"  data-id="{{$user->id}}">启用</button>
                                @endif

                                <a class="btn btn-sm btn-info" href="/users/update?id={{$user->id}}">更改</a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" align="center">暂无数据</td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer clearfix">
            {{ $users->links() }}
        </div>
    </div>
@endsection

@section('style')
    <style>

    </style>
@endsection

@section('js')
    <script type="text/javascript" src="/lib/layer/2.4/layer.js"></script>
    <script>
        $(function () {
            $('.updateStatus').click(function () {
               var id_ = $(this).attr('data-id');
               var status_ = $(this).attr('data-status');
               var text_ = ('1' == status_)?'启用':'禁用';
               var confirm_index = layer.confirm("您确定要"+ text_ +"该用户吗？",{}, function () {
                   layer.close(confirm_index);
                   var load_index = layer.msg('正在处理中', {
                       icon: 16,
                       shade: 0.5,
                       time: 15000
                   });
                   $.ajaxSetup({
                       headers: {
                           'X-CSRF-TOKEN': "{{ csrf_token() }}"
                       }
                   });
                   $.post('/users/updatestatus', {id: id_, status: status_}, function (res) {
                       if(res.code == 200){
                           layer.close(load_index);
                           layer.msg('操作成功！', {icon: 1});
                           window.location.reload();
                       }else{
                           layer.alert(res.message, {icon: 5});
                       }
                   });
               });
            });
        });
    </script>
@endsection